<html>
  <head>
    <title>reactdemo</title>
    <script src="/static/react.js"></script>
    <script src="/static/react-dom.js"></script>
    <script src="/static/browser.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/babel">
        var Letter=React.createClass({
            render:function(){
                var letterStyle={
                padding:10,
                margin:10,
                backgroundColor:this.props.bgcolor,
                color:"#333",
                display:"inline-block",
                fontSize:32,
                fontFamily:"monospace",
                textAlign:"center"
            };
          return(
            <div style={letterStyle}>
                {this.props.children}
            </div>
          );
        }
      });
      var destination =document.querySelector("#container");
      ReactDOM.render(
        <div>
            <Letter bgcolor="#58B3FF">l</Letter>
            <Letter bgcolor="#FF605F">o</Letter>
            <Letter bgcolor="#FFD52E">v</Letter>
            <Letter bgcolor="#49DD8E">e</Letter>
        </div>
        ,
      destination
      );

    </script>
  </body>
</html>
